// frontend/src/components/Dashboard.js
export const DashboardComponent = {
  props: ['user', 'dashboard', 'platformThemeClass'],
  data() {
    return {
      stats: {
        projects: { total: 0, active: 0 },
        tasks: { total: 0, completed: 0, running: 0 },
        samples: { total: 0 }
      },
      loading: false
    };
  },
  async mounted() {
    this.refreshDashboardData();
  },
  methods: {
    switchDashboardTab(tab) {
      this.$emit('switch-tab', tab);
    },
    async refreshDashboardData() {
      this.loading = true;
      try {
        const token = localStorage.getItem('token');
        // 这里应该调用实际的API获取统计数据
        // 暂时使用模拟数据
        await new Promise(resolve => setTimeout(resolve, 500));
        
        // 模拟数据
        this.stats = {
          projects: { total: 12, active: 8 },
          tasks: { total: 24, completed: 18, running: 3 },
          samples: { total: 128 }
        };
      } catch (error) {
        console.error('获取仪表板数据失败:', error);
      } finally {
        this.loading = false;
      }
    }
  },
  template: `
    <div class="container-fluid py-4">
      <div class="row">
        <div class="col-12">
          <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>用户控制台</h2>
            <button class="btn btn-outline-primary" @click="refreshDashboardData" :disabled="loading">
              <i class="bi bi-arrow-clockwise me-1" :class="{'fa-spin': loading}"></i>
              {{ loading ? '刷新中...' : '刷新数据' }}
            </button>
          </div>
        </div>
      </div>
      
      <!-- 统计卡片 -->
      <div class="row mb-4">
        <div class="col-md-3 mb-3">
          <div class="card shadow-sm h-100">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <h5 class="card-title text-muted">项目总数</h5>
                  <h2 class="mb-0">{{ stats.projects.total }}</h2>
                </div>
                <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                  <i class="bi bi-folder text-primary fs-3"></i>
                </div>
              </div>
              <div class="mt-2">
                <span class="text-success">
                  <i class="bi bi-arrow-up-circle"></i> {{ stats.projects.active }} 个进行中
                </span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="col-md-3 mb-3">
          <div class="card shadow-sm h-100">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <h5 class="card-title text-muted">任务总数</h5>
                  <h2 class="mb-0">{{ stats.tasks.total }}</h2>
                </div>
                <div class="bg-info bg-opacity-10 rounded-circle p-3">
                  <i class="bi bi-card-checklist text-info fs-3"></i>
                </div>
              </div>
              <div class="mt-2">
                <span class="text-success me-2">
                  <i class="bi bi-check-circle"></i> {{ stats.tasks.completed }} 个已完成
                </span>
                <span class="text-warning">
                  <i class="bi bi-play-circle"></i> {{ stats.tasks.running }} 个运行中
                </span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="col-md-3 mb-3">
          <div class="card shadow-sm h-100">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <h5 class="card-title text-muted">样本总数</h5>
                  <h2 class="mb-0">{{ stats.samples.total }}</h2>
                </div>
                <div class="bg-success bg-opacity-10 rounded-circle p-3">
                  <i class="bi bi-database text-success fs-3"></i>
                </div>
              </div>
              <div class="mt-2">
                <span class="text-muted">样本数据</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="col-md-3 mb-3">
          <div class="card shadow-sm h-100">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <h5 class="card-title text-muted">存储使用</h5>
                  <h2 class="mb-0">2.4<span class="fs-5">GB</span></h2>
                </div>
                <div class="bg-warning bg-opacity-10 rounded-circle p-3">
                  <i class="bi bi-hdd text-warning fs-3"></i>
                </div>
              </div>
              <div class="mt-2">
                <div class="progress" style="height: 8px;">
                  <div class="progress-bar bg-warning" role="progressbar" style="width: 60%"></div>
                </div>
                <small class="text-muted">共 4GB</small>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="row">
        <!-- 左侧导航菜单 -->
        <div class="col-lg-2 col-md-3 mb-4">
          <div class="card shadow-sm">
            <div class="card-header bg-primary text-white">
              <h6 class="mb-0"><i class="bi bi-list me-2"></i>功能导航</h6>
            </div>
            <div class="list-group list-group-flush">
              <button class="list-group-item list-group-item-action" 
                      :class="{ 'active': dashboard.activeTab === 'overview' }"
                      @click="switchDashboardTab('overview')">
                <i class="bi bi-speedometer2 me-2"></i>控制台
              </button>
              <button class="list-group-item list-group-item-action" 
                      :class="{ 'active': dashboard.activeTab === 'projects' }"
                      @click="switchDashboardTab('projects')">
                <i class="bi bi-folder me-2"></i>项目管理
              </button>
              <button class="list-group-item list-group-item-action" 
                      :class="{ 'active': dashboard.activeTab === 'tasks' }"
                      @click="switchDashboardTab('tasks')">
                <i class="bi bi-card-checklist me-2"></i>任务管理
              </button>
              <button class="list-group-item list-group-item-action" 
                      :class="{ 'active': dashboard.activeTab === 'profile' }"
                      @click="switchDashboardTab('profile')">
                <i class="bi bi-person me-2"></i>个人中心
              </button>
              <!-- 管理员独有功能 -->
              <button v-if="user.role === 'admin'" 
                      class="list-group-item list-group-item-action" 
                      :class="{ 'active': dashboard.activeTab === 'admin' }"
                      @click="$emit('show-admin-panel')">
                <i class="bi bi-gear me-2"></i>系统管理
              </button>
            </div>
          </div>
        </div>
        
        <!-- 右侧内容区域 -->
        <div class="col-lg-10 col-md-9">
          <!-- 控制台概览 -->
          <div v-if="dashboard.activeTab === 'overview'">
            <div class="card shadow-sm">
              <div class="card-header bg-white">
                <h4 class="mb-0"><i class="bi bi-speedometer2 me-2"></i>控制台概览</h4>
              </div>
              <div class="card-body">
                <div class="row">
                  <div class="col-md-6">
                    <h5 class="mb-3">最近项目</h5>
                    <div class="table-responsive">
                      <table class="table table-hover">
                        <thead>
                          <tr>
                            <th>项目名称</th>
                            <th>状态</th>
                            <th>创建时间</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>RNA-Seq分析项目</td>
                            <td><span class="badge bg-success">进行中</span></td>
                            <td>2023-10-15</td>
                          </tr>
                          <tr>
                            <td>基因组重测序</td>
                            <td><span class="badge bg-info">已完成</span></td>
                            <td>2023-10-10</td>
                          </tr>
                          <tr>
                            <td>蛋白质组分析</td>
                            <td><span class="badge bg-warning">等待中</span></td>
                            <td>2023-10-18</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <h5 class="mb-3">最近任务</h5>
                    <div class="table-responsive">
                      <table class="table table-hover">
                        <thead>
                          <tr>
                            <th>任务名称</th>
                            <th>状态</th>
                            <th>完成时间</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>数据预处理</td>
                            <td><span class="badge bg-success">已完成</span></td>
                            <td>2023-10-16 14:30</td>
                          </tr>
                          <tr>
                            <td>序列比对</td>
                            <td><span class="badge bg-primary">运行中</span></td>
                            <td>-</td>
                          </tr>
                          <tr>
                            <td>差异表达分析</td>
                            <td><span class="badge bg-secondary">等待中</span></td>
                            <td>-</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 项目管理界面 -->
          <div v-if="dashboard.activeTab === 'projects'">
            <div class="card shadow-sm">
              <div class="card-header bg-white">
                <h4 class="mb-0"><i class="bi bi-folder me-2"></i>项目管理</h4>
              </div>
              <div class="card-body">
                <div class="text-center py-5">
                  <i class="bi bi-folder-plus fs-1 text-muted"></i>
                  <h5 class="mt-3">项目管理功能正在开发中</h5>
                  <p class="text-muted">这里将展示您参与的所有项目</p>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 任务管理界面 -->
          <div v-if="dashboard.activeTab === 'tasks'">
            <div class="card shadow-sm">
              <div class="card-header bg-white">
                <h4 class="mb-0"><i class="bi bi-card-checklist me-2"></i>任务管理</h4>
              </div>
              <div class="card-body">
                <div class="text-center py-5">
                  <i class="bi bi-card-checklist fs-1 text-muted"></i>
                  <h5 class="mt-3">任务管理功能正在开发中</h5>
                  <p class="text-muted">这里将展示您提交的所有分析任务</p>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 个人中心界面 -->
          <div v-if="dashboard.activeTab === 'profile'">
            <div class="card shadow-sm">
              <div class="card-header bg-white">
                <h4 class="mb-0"><i class="bi bi-person me-2"></i>个人中心</h4>
              </div>
              <div class="card-body">
                <div class="text-center py-5">
                  <i class="bi bi-person-circle fs-1 text-muted"></i>
                  <h5 class="mt-3">个人中心功能正在开发中</h5>
                  <p class="text-muted">这里将展示您的个人信息和设置选项</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `
};